<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>grid</title>
    <meta name="keywords" content="jquery,ui,easy,easyui,web">
    <meta name="description" content="easyui help you build your web page easily!">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/default/easyui.css">
    <link rel="stylesheet" type="text/css" href="/easyui/themes/icon.css">
    <script type="text/javascript" src="/js/jquery.min.js"></script>
    <script type="text/javascript" src="/easyui/js/jquery.easyui.min.js"></script>
    <style>
    </style>
</head>
<body>
    <div style="width: 100%;height: 15px;border-bottom: 1px solid red"></div>
    <p>创建复杂的表格工具</p>
    <table id="dg" title="My Users" class="easyui-datagrid" style="width:550px;height:250px"
           url="/user/list"
           rownumbers="true" fitColumns="true" singleSelect="false"
    >
        <thead frozen="true">
        <tr>
            <th field="id" width="50">id</th>
        </tr>
        </thead>
        <thead>
        <tr>
            <th field="firstname" width="50">First Name</th>
            <th field="lastname" width="50">Last Name</th>
            <th field="phone" width="50">Phone</th>
            <th field="email" width="50">Email</th>
        </tr>
        </thead>
    </table>
    <table id="dg2">
    </table>
    <script>
        $(function (e) {
            $('#dg2').datagrid({
                title: 'My Users',
                iconCls: 'icon-save',
                width: 550,
                height: 250,
                url: '/user/list',
                frozenColumns: [
                    [
                        {field: 'id', title: 'id', width: 80}
                    ]
                ],
                columns: [
                    [
                        {field: 'firstname', title: 'First Name', width: 80, align: 'right'},
                        {field: 'lastname', title: 'Last Name', width: 80, align: 'right'},
                        {field: 'phone', title: 'Phone', width: 100},
                        {field: 'email', title: 'Email', width: 150}
                    ]
                ]
            });
        });
    </script>


</body>

</html>